<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>用户注册</title>

<style>
input[type=text], [type=password] {
	width: 335px;
	height: 45px;
	font-family: "微软雅黑";
	font-size: 14px;
	padding-left: 10px;
}

div {
	margin-bottom: 15px;;
}

input[type=submit] {
	width: 348px;
	height: 45px;
	color: white;
	font-family: "微软雅黑";
	font-size: 18px;
	background-color: #f56600;
	border: 0px solid;
	border-radius: 5px 5px 5px 5px;
}

input[type="submit"]:hover {
	cursor: pointer;
}

#registerDiv {
	margin-left: 500px;
	margin-top: 30px;
}

#h1 {
	margin-left: 600px;
	margin-top: 30px;
}
</style>

</head>
<body>

	<form action="login.do" method="post">
		<h1 id="h1">注册页面</h1>
		<div id="registerDiv">
			<div>
				<input id="username" name="username" type="text" onfocus="onfocusUsername()" onblur="checkUsername()"
					placeholder="请输入用户名" />
				<input id="checkUserN" type="hidden" value="输入用户名有误，长度不能超过10位！" readonly="readonly" style="color: red;border: none;"   />
			</div>

			<div>
				<input id="phoneNumber" name="phoneNumber" type="text" onfocus="onfocusPhe()" onblur="checkPhone()"
					placeholder="请输入手机号码" />
				<input id="checkPhe" type="hidden"  value="输入手机号码有误！" readonly="readonly" style="color: red;border: none;"   />
			</div>

			<div>
				<input id="password" name="password" type="password" onfocus="onfocusPhe2()"
					placeholder="请输入密码" />
				<input id="checkP1" type="hidden" value="两次密码不一致！" readonly="readonly" style="color: red;border: none;"   />
			</div>

			<div>
				<input id="checkPassword" name="checkPassword" onfocus="onfocusPsw()" onblur="checkPsw()"
					type="password" placeholder="请再次输入密码" />
				<input id="checkP2" type="hidden" value="两次密码不一致！" readonly="readonly" style="color: red;border: none;"   />
			</div>

			<div>
				<input type="submit" value="立即注册" />
			</div>
		</div>
	</form>
</body>
<script type="text/javascript">
	
	function checkPsw() {

		var psw1 = document.getElementById('password').value;
		var psw2 = document.getElementById('checkPassword').value;

		if (psw1 != psw2) {
			document.getElementById('checkP1').setAttribute("type","text");
			document.getElementById('checkP2').setAttribute("type","text");
			document.getElementById('password').value = '';
			document.getElementById('checkPassword').value = '';
		}
	}
	function onfocusPsw(){
		document.getElementById('checkP1').setAttribute("type","hidden");
		document.getElementById('checkP2').setAttribute("type","hidden");
	}
	function onfocusPsw2(){
		document.getElementById('checkP1').setAttribute("type","hidden");
		document.getElementById('checkP2').setAttribute("type","hidden");
	}
	
	function checkPhone(){
		
		var reg = /^1\d{10}$/g;
		var iptPhone = document.getElementById('phoneNumber').value;
		
		var jieguo = reg.test(iptPhone);
		if(jieguo == false){
			document.getElementById('checkPhe').setAttribute("type","text");
		}
	}
	function onfocusPhe(){
		document.getElementById('checkPhe').setAttribute("type","hidden");
	}
	
	function checkUsername(){
		var iptUsername = document.getElementById('username').value;
		if(iptUsername.length>10){
			document.getElementById('checkUserN').setAttribute("type","text");
		}
	}
	function onfocusUsername(){
		document.getElementById('checkUserN').setAttribute("type","hidden");
	}
	
	
</script>

</html>